<template>
  <div class="h-full w-full">
    <Top></Top>
    <a-layout class="px-[10px] pt-[10px]">
      <Mnues v-model="selectedMenu" :list="list"></Mnues>
      <a-layout-content class="mt-[10px] bg-[#fff] p-[20px]">
        <Record v-if="selectedMenu == 1" />
        <Used v-else-if="selectedMenu == 2" />
        <Unused v-else-if="selectedMenu == 3" />
        <Exchange v-else-if="selectedMenu == 4"  />
        <!-- <ExportRecord v-else-if="selectedMenu == 5"  /> -->
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script lang="ts" setup>
import Top from "@/components/workHearder/index.vue";
import AssetOne from "@/assets/img/work/asset-1.png";
import AssetTwo from "@/assets/img/work/asset-2.png";
import AssetThree from "@/assets/img/work/asset-3.png";
import AssetFour from "@/assets/img/work/asset-4.png";
import AssetFive from "@/assets/img/组 6370@2x.png";

import Mnues from "@/components/menus/index.vue";

import Record from "./record/index.vue";
import Used from "./used/index.vue";
import Unused from "./UnUsed/index.vue";
import Exchange from "./exchange/index.vue";
import ExportRecord from "./ExportRecord/index.vue";


const list = [
  {
    key: 1,
    name: "会员购买记录",
    img: AssetOne,
  },
  {
    key: 2,
    name: "已用抵扣码",
    img: AssetTwo,
  },
  {
    key: 3,
    name: "未用抵扣码",
    img: AssetThree,
  },
  {
    key: 4,
    name: "兑换抵扣码",
    img: AssetFour,
  },
  // {
  //   key: 5,
  //   name: "数据导出记录",
  //   img: AssetFive,
  // },
];

const selectedMenu = ref(1);
</script>

<style lang="scss" scoped></style>
